<template>
  <view class="settled-page">
    <view class="settled-area">
      <view class="area-title">
        <view class="title">研究领域 <view style="color: #F52020;">*</view>
        </view>
        <view class="label">（多选）</view>
      </view>
      <view class="erea-list">
        <view :class="ereaClass(item.id)" v-for="item,index in ereaList" :key="item.id" @click="onerea(item.id)">
          {{item.name}}
        </view>
      </view>
    </view>
    <view class="settled-edsc">
      <view class="edsc-title">经验描述 <view style="color: #F52020;">*</view>
      </view>
      <view class="edsc-textarea">
        <up-textarea v-model="textareaValue" autoHeight border="none" count maxlength="800"
          placeholder="请在这里输入您的个人收藏经历以及相关从业经验"></up-textarea>
      </view>
      <view class="edsc-head">
        <view class="edsc-title">资质证书或相关图片 <view style="color: #F52020;">*</view>
        </view>
        <view class="edsc-label">{{imgList.length}}/8</view>
      </view>
      <view class="edsc-imgs">
        <up-upload :fileList="fileList1" uploadIconColor="#CCCCCC" uploadIcon="plus-circle" @afterRead="afterRead"
          @delete="deletePic" name="1" multiple :maxCount="8"></up-upload>
      </view>
    </view>
    <view class="settled-info">
      <view class="form-list">
        <view class="list-title">真实姓名 <view style="color: #F52020;">*</view>
        </view>
        <view class="list-int">
          <up-input placeholder="请填写真实姓名" border="none" v-model="real_name"></up-input>
        </view>
      </view>
      <view class="form-list">
        <view class="list-title">手机号码 <view style="color: #F52020;">*</view>
        </view>
        <view class="list-int">
          <up-input placeholder="请填写真实手机号码" type="number" border="none" v-model="mobile"></up-input>
        </view>
      </view>
      <view class="form-list">
        <view class="list-title">推荐人 </view>
        <view class="list-int">
          <up-input placeholder="请填写用户ID或手机号" border="none" v-model="referrer"></up-input>
        </view>
      </view>
    </view>
    <view class="settled-btn">
      <up-button text="提交入驻" shape="circle" color="#A4682F" @click="onsubmit"></up-button>
    </view>
  </view>
  <up-modal :show="modalShow" title="提交成功" contentTextAlign="center" confirmColor="#A4682F" content='提交成功,我们会尽快联系你'
    @confirm="onconfirm"></up-modal>
</template>

<script setup>
  import {
    settled
  } from './api.js'
  import {
    ref
  } from 'vue'
  import {
    env
  } from '@/http/env.js'
  const textareaValue = ref()
  const fileList1 = ref([]);
  const modalShow = ref(false)
  const ereaList = uni.getStorageSync('classificationList')
  const ereaActive = ref([])
  const real_name = ref('')
  const mobile = ref('')
  const referrer = ref('')
  const imgList = ref([])

  const settledApi = (async () => {
    const res = await settled({
      category_ids: ereaActive.value.join(','),
      desc: textareaValue.value,
      images: imgList.value.join(','),
      real_name: real_name.value,
      mobile: mobile.value,
      referrer: referrer.value,
    })
    if (res && res.code === 1) {
      modalShow.value = true
    } else {
      uni.showToast({
        title: res.msg,
        icon: 'none'
      })
    }
  })

  function onerea(id) {
    const index = ereaActive.value.findIndex((e) => e === id)
    if (index === -1) {
      ereaActive.value.push(id)
    } else {
      ereaActive.value.splice(index, 1)
    }
  }

  function ereaClass(id) {
    const index = ereaActive.value.findIndex((e) => e === id)
    return index !== -1 ? 'erea-active' : 'erea-nav'
  }

  function onsubmit() {
    if (!ereaActive.value.length) {
      uni.showToast({
        title: '请选择研究领域',
        icon: 'none'
      })
      return
    }
    if (!textareaValue.value) {
      uni.showToast({
        title: '请输入经验描述',
        icon: 'none'
      })
      return
    }
    if (!imgList.value.length) {
      uni.showToast({
        title: '请上传资质证书或相关图片',
        icon: 'none'
      })
      return
    }
    if (!real_name.value) {
      uni.showToast({
        title: '请输入真是姓名',
        icon: 'none'
      })
      return
    }
    if (!mobile.value) {
      uni.showToast({
        title: '请输入手机号码',
        icon: 'none'
      })
      return
    }
    const regex = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/
    if (!regex.test(mobile.value)) {
      uni.showToast({
        title: '请输入正确的手机号码',
        icon: 'none'
      })
      return
    }
    settledApi()
  }

  function onconfirm() {
    uni.navigateBack(-1)
  }

  // 删除图片
  const deletePic = (event) => {
    fileList1.value.splice(event.index, 1);
    imgList.value.splice(event.index, 1);
  };

  // 新增图片
  const afterRead = async (event) => {
    // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
    let lists = [].concat(event.file);
    let fileListLen = fileList1.value.length;
    lists.map((item) => {
      fileList1.value.push({
        ...item,
        status: 'uploading',
        message: '上传中',
      });
    });
    for (let i = 0; i < lists.length; i++) {
      const result = await uploadFilePromise(lists[i].url);
      let item = fileList1.value[fileListLen];
      fileList1.value.splice(fileListLen, 1, {
        ...item,
        status: 'success',
        message: '',
        url: result.fullurl,
      });
      fileListLen++;
    }
  };

  const uploadFilePromise = (url) => {
    const token = uni.getStorageSync('userInfo').token
    return new Promise((resolve, reject) => {
      let a = uni.uploadFile({
        url: `${env.baseUrl}/common/upload`, // 仅为示例，非真实的接口地址
        filePath: url,
        name: 'file',
        formData: {
          user: 'test',
        },
        header: {
          token: token
        },
        success: (res) => {
          const data = JSON.parse(res.data)
          if (data && data.code == 1) {
            imgList.value.push(data.data.fullurl)
            resolve(data.data);
          } else {
            uni.showToast({
              title: data.msg,
              icon: 'none'
            })
          }
        },
      });
    });
  };
</script>

<style lang="scss" scoped>
  .settled-page {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 0 30rpx 146rpx;
    height: 100%;
    overflow: scroll;

    .settled-area {
      margin-top: 24rpx;
      width: 100%;
      border-radius: 16rpx;
      background: #FFFFFF;
      box-sizing: border-box;
      padding: 40rpx 30rpx;

      .area-title {
        display: flex;
        align-items: baseline;

        .title {
          display: flex;
          font-size: 32rpx;
          font-weight: 500;
          color: rgba(51, 51, 51, 1);
        }

        .label {
          font-size: 28rpx;
          font-weight: 400;
          color: rgba(153, 153, 153, 1);

        }
      }

      .erea-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .erea-nav {
          width: 194rpx;
          height: 64rpx;
          box-sizing: border-box;
          border-radius: 342rpx;
          border: 1rpx solid #CCCCCC;
          font-size: 28rpx;
          font-weight: 400;
          color: rgba(102, 102, 102, 1);
          display: flex;
          align-items: center;
          justify-content: center;
          margin-top: 24rpx;
        }

        .erea-active {
          width: 194rpx;
          height: 64rpx;
          box-sizing: border-box;
          border-radius: 342rpx;
          background: $color;
          font-size: 28rpx;
          font-weight: 400;
          color: rgba(255, 255, 255, 1);
          display: flex;
          align-items: center;
          justify-content: center;
          margin-top: 24rpx;

        }
      }
    }

    .settled-edsc {
      width: 100%;
      border-radius: 16rpx;
      background: #FFFFFF;
      margin-top: 24rpx;
      box-sizing: border-box;
      padding: 40rpx 30rpx;

      .edsc-title {
        display: flex;
        font-size: 32rpx;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
      }

      .edsc-textarea {
        width: 630rpx;
        min-height: 258rpx;
        border-radius: 16rpx;
        background: #F2F2F2;
        margin-top: 24rpx;
        box-sizing: border-box;
        padding: 24rpx 30rpx;

        ::v-deep .u-textarea__count {
          background-color: transparent !important;
        }

        ::v-deep .u-textarea {
          background-color: transparent;
          height: 100%;
          min-height: 258rpx;
          padding: 0;
        }

        ::v-deep .uni-textarea-wrapper {
          overflow-y: visible;
        }

        ::v-deep .uni-textarea-placeholder {
          overflow: visible;
        }
      }

      .edsc-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 40rpx;

        .edsc-label {
          font-size: 28rpx;
          font-weight: 400;
          color: rgba(102, 102, 102, 1);

        }
      }

      .edsc-imgs {
        margin-top: 24rpx;

        ::v-deep .u-upload__wrap {
          width: 103%;
        }

        ::v-deep.u-upload__button {
          height: 146rpx !important;
          width: 146rpx !important;
          background-color: #fff;
          border: 2rpx solid #EBEBEB;

        }

        ::v-deep .u-upload__wrap__preview__image {
          height: 146rpx !important;
          width: 146rpx !important;
        }

        ::v-deep .u-upload__wrap__preview:nth-child(4n) {
          margin-right: 0;
        }
      }
    }

    .settled-info {
      margin-top: 24rpx;
      display: flex;
      flex-direction: column;
      background-color: #fff;
      box-sizing: border-box;
      padding: 0 30rpx;
      border-radius: 16rpx;

      .form-list {
        width: 100%;
        height: 88rpx;
        display: flex;
        align-items: center;
        border-bottom: 2rpx solid #ebebeb;

        .list-title {
          width: 25%;
          font-size: 28rpx;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
          display: flex;
        }

        .list-int {
          flex: 1;
        }
      }

      .form-list:last-child {
        border: none;
      }
    }

    .settled-btn {
      width: 750rpx;
      height: 112rpx;
      background: #FFFFFF;
      position: fixed;
      bottom: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      padding: 0 30rpx;
    }
  }
</style>